import useQuestionnaireStore from '@/store/questionnaire';
import { Divider } from 'ant-design-vue';
import { defineComponent, PropType, ref } from 'vue';
import { QuestionType } from '../typing';

export default defineComponent({
  props: {
    question: {
      type: Object as PropType<QuestionType>,
      required: true,
    },
    language: {
      type: String as PropType<'zh' | 'en'>,
      required: true,
    },
  },
  setup(props) {
    const { question } = props;
    const mode = ref<string>(question.mode);
    const questionnaireStore = useQuestionnaireStore();
    const basicInfo = questionnaireStore.getBasicInfo;

    if (basicInfo.pageTotal === undefined) {
      basicInfo.pageTotal = 2;
    } else {
      basicInfo.pageTotal++;
    }
    question.pageNumber = basicInfo.pageTotal - 1;

    return () => {
      return (
        <div
          class={[
            'question-container',
            'question-paging-container',
            { 'question-design': mode.value === 'design' },
          ]}
        >
          <Divider
            key={`paging-${question.id}`}
            plain={true}
          >{`${question.pageNumber}/${basicInfo.pageTotal}`}</Divider>
        </div>
      );
    };
  },
});
